<template>
  <!-- <div class="g-cur">
    <div class="wp">
      <NuxtLink to="/" class="a">个人中心</NuxtLink><span> / </span
      ><NuxtLink to="/" class="a">我的资产</NuxtLink><span> / </span>
      <span class="s">资产详情</span>
    </div>
  </div> -->
  <div class="g-rowb1">
    <div class="wp1630">
      <!--  <div class="g-bookbox">
        <div class="left">
          <img src="/images/b-i1.png" alt="" class="icon" />
          <div class="pic">
            <img src="/images/lg-bg.png" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="tit">汉字与中华文化十讲</div>

            <a-popover placement="bottomLeft">
              <template #content>
                <div class="gshare-box">
                  <div class="line">
                    <div class="icn">
                      <svg
                        t="1722502567756"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4253"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M868.78260513 350.93851167c-4.19752479 316.58112364-206.64378348 533.42289687-508.84923077 547.04005471-124.62575954 5.70639316-214.91280228-34.551102-293.48715213-84.46745527 92.10982108 14.70125585 206.32520569-22.11723305 267.41045242-74.40833277-90.28704274-8.78247749-143.74276011-54.7393641-168.7552-128.69725356 26.08953618 4.51026781 53.57474644 3.31414245 78.36079771-1.93480569-81.47305755-27.27282508-139.65259487-77.62795213-142.6586621-183.14254588 22.8629151 10.40920798 46.6967339 20.19409687 78.36079772 22.12306782-60.97321937-34.68180056-106.05956011-161.46291966-54.42078633-245.29788718 90.49359316 99.18854928 199.34683533 180.12947692 378.08647293 191.07898346-44.87512251-191.83050029 209.33127293-295.85489687 315.7222473-166.92541994 44.97431338-8.70079088 81.58158405-25.7639567 116.79551453-44.33599088-14.49353846 44.54837607-42.40585299 75.68030997-76.43065983 100.58539031 37.3506188-5.04239772 70.41152364-14.16912593 98.65525243-28.12469971-17.51944388 36.39255157-55.82929687 69.02751909-88.78984388 96.50689458z"
                          fill="currentColor"
                          p-id="4254"
                        ></path>
                      </svg>
                    </div>
                    <div class="p">分享到Twitter</div>
                  </div>
                  <div class="line">
                    <div class="icn">
                      <svg
                        t="1722502622673"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="5308"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M862.51879883 439.40783691c-69.21386719 0-136.53259278-22.49450684-191.90368653-64.1052246v290.28625488c0 148.23303223-114.20288086 268.28613281-255.10253905 268.28613281S160.41003418 813.82189942 160.41003418 665.58886719c0-148.23303223 114.20288086-268.28613281 255.10253907-268.28613281 14.08996583 0 27.76794434 1.23596192 41.116333 3.54309081v153.75366211c-12.77160645-5.02624512-26.3671875-7.58056641-40.04516602-7.5805664-62.8692627 0-113.87329102 53.55834961-113.87329101 119.72351074 0 66.08276367 51.00402833 119.72351075 113.87329101 119.72351075 62.78686523 0 113.79089356-53.64074708 113.79089356-119.72351075V90.125H672.67504883c0 110.82458497 85.446167 200.63781739 190.83251953 200.63781739v148.56262206l-0.98876953 0.08239747"
                          fill="currentColor"
                          p-id="5309"
                        ></path>
                      </svg>
                    </div>
                    <div class="p">分享到Tik Tok</div>
                  </div>
                </div>
              </template>

              <div class="share">
                <svg
                  t="1722397967169"
                  class="svg"
                  viewBox="0 0 1252 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5977"
                  width="64"
                  height="64"
                >
                  <path
                    d="M789.325694 92.701516L1164.112805 483.412814c19.905234 20.758315 24.739362 31.279653-2.559244 59.715701L788.472612 936.114697V767.773294a71.09012 71.09012 0 0 0-71.09012-71.09012h-39.810467c-125.971692 0-424.550195 23.88628-597.157006 210.711115 32.132734-183.412509 120.568843-351.185192 252.512106-457.251651a615.640437 615.640437 0 0 1 356.019319-126.824773l32.417095-1.706163a71.09012 71.09012 0 0 0 67.109073-71.37448V92.701516M773.970228 0c-28.436048 0-56.872096 22.748838-56.872096 69.952678V250.237222l-32.132734 1.706162a682.46515 682.46515 0 0 0-398.104671 142.18024C142.689964 511.848862 27.239609 708.626314 0.509724 961.991501A54.881572 54.881572 0 0 0 46.860483 1023.697725a22.748838 22.748838 0 0 0 7.393372 0 48.056921 48.056921 0 0 0 43.507153-25.308083C236.244562 799.337307 532.26382 767.773294 677.572025 767.773294h39.810467v193.080765A59.715701 59.715701 0 0 0 776.529472 1023.697725a65.11855 65.11855 0 0 0 46.350758-20.758315l389.858217-412.038334c50.047444-52.037968 52.606689-106.066459 2.559244-158.104427L815.202497 17.91471A56.872096 56.872096 0 0 0 773.970228 0z"
                    p-id="5978"
                  ></path>
                </svg>
              </div>
            </a-popover>
          </div>
          <div class="user">
            <div class="img"></div>
            <div class="t">郭玉增</div>
          </div>
          <div class="line"></div>
          <div class="infobox">
            <div class="gp">
              <div class="s">作品ID：</div>
              <div class="pp">
                <div class="tt">
                  0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                </div>
              </div>
            </div>
            <div class="gp">
              <div class="s">区块链标准：</div>
              <div class="pp">
                <div class="tt">DOB</div>
              </div>
            </div>
            <div class="gp">
              <div class="s">哈希地址：</div>
              <div class="pp">
                <div class="tt">
                  0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                </div>
                <div class="copy"><copy-outlined /></div>
              </div>
            </div>
            <div class="gp">
              <div class="s">合约地址：</div>
              <div class="pp">
                <div class="tt">9848920981203232443</div>
              </div>
            </div>
            <div class="gp">
              <div class="s">ISBN编号：</div>
              <div class="pp">
                <div class="tt">9490-0232323</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="infobox">
            <div class="gp">
              <div class="s">购买时间：</div>
              <div class="pp">
                <div class="tt">2024/07/09 11:40:04</div>
              </div>
              <div class="s">购买花费：</div>
              <div class="pp">
                <div class="tt">100USD</div>
              </div>
            </div>
            <div class="gp">
              <div class="s" style="color: #6b6b6b">预估收益：</div>
              <div class="pp sty1" >
                <div class="tt">
                  <div class="nums"><b>15.28</b>USD</div>
                  <a-tooltip placement="top">
                    <template #title>
                      <span>prompt text</span>
                    </template>
                    <question-circle-outlined />
                  </a-tooltip>
                </div>
                
              </div>
            </div>
          </div>
          <div class="gap24"></div>
          <div class="sbtn">立即提现</div>
        </div>
        <div class="c"></div>
      </div> -->
      <div class="bl-bookbox">
        <div class="left">
          <div class="share">
            <div class="itm">
              <img src="/images/d-s1.svg" alt="" />
            </div>
            <div class="itm">
              <img src="/images/d-s2.svg" alt="" />
            </div>
            <div class="itm">
              <img src="/images/d-s3.svg" alt="" />
            </div>
          </div>
          <div class="pic">
            
            <!-- 金浆果 -->
            <div class="t-icon" v-if="bookObj.phase && bookObj.phase == 'GOLD'">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 银奖 -->
            <div class="t-icon" v-if="bookObj.phase && bookObj.phase == 'SILVER'" style="background-color: #617583;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 铜奖 -->
            <div class="t-icon" v-if="bookObj.phase && bookObj.phase == 'COPPER'" style="background-color: #88706a;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 蓝莓 -->
            <div class="t-icon" v-if="bookObj.phase && bookObj.phase == 'BLUE'" style="background-color: #000000;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <img :src="bookObj?.bannerImages?.[0]" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="tit">{{ bookObj.title }}</div>
            <div class="desc">{{ bookObj.user?.name }}</div>
          </div>
          <div class="cen">
            <div class="infobox">
              <div class="gp">
                <div class="s">作品ID：</div>
                <div class="pp">
                  <div class="tt">
                    {{ bookObj.cluster?.clusterId }}
                  </div>
                </div>
              </div>
              <div class="gp">
                <div class="s">区块链标准：</div>
                <div class="pp">
                  <div class="tt">DOB</div>
                </div>
              </div>
              <div class="gp">
                <div class="s">哈希地址：</div>
                <div class="pp">
                  <div class="tt">
                    {{ bookObj.cluster?.hash }}
                  </div>
                  <!-- <div class="copy"><copy-outlined /></div> -->
                </div>
              </div>
              <div class="gp">
                <div class="s">合约地址：</div>
                <div class="pp">
                  <div class="tt">{{ bookObj.cluster?.contractHash }}</div>
                </div>
              </div>
              <div class="gp">
                <div class="s">ISBN编号：</div>
                <div class="pp">
                  <div class="tt">{{ bookObj.copyright?.isbn?.isbnNum }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="bot">
            <div class="ll">
              当前版权价格<em class="n">{{
                    bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] ?
                      bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] : 0
                      }}</em><span class="unit">USD</span>
            </div>
            <div class="rr">
              <div class="btn" @click="visible = true">立即购买版权</div>
            </div>
          </div>
        </div>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">发行阶段</div>
        <div class="m-txtb1">
          SilentBerry采用金浆果、银浆果、铜浆果和蓝莓四级的NFT发行模式。用户可购买不同等级的NFT获得作品内容及作品销售分成。（不同等级分成不同）
        </div>

        <ul class="b-list1 sty1">
          <li :class="bookObj.phase == 'GOLD' ? 'act' : ''">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i1.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">金浆果</div>
                  <div class="idx">01</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">{{ bookObj.price?.goldCount }}</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">{{ bookObj.phase == 'GOLD' ? bookObj.phaseRemain : 0 }}</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">{{ bookObj.price?.goldPrice }}USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li :class="bookObj.phase == 'SILVER' ? 'act' : ''">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i2.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">银浆果</div>
                  <div class="idx">02</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">{{ bookObj.price?.silverCount }}</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">{{ bookObj.phase == 'SILVER' ? bookObj.phaseRemain : (
                      bookObj.phase == 'GOLD') ? bookObj.price?.silverCount : 0 }}</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">{{ bookObj.price?.silverPrice }}USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li :class="bookObj.phase == 'COPPER' ? 'act' : ''">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i3.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">铜浆果</div>
                  <div class="idx">03</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">{{ bookObj.price?.copperPrice }}</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">{{ bookObj.phase == 'SILVER' ? bookObj.price?.copperCount : (
                      bookObj.phase == 'GOLD') ? bookObj.price?.copperPrice : (bookObj.phase == 'COPPER' ?
                        bookObj.phaseRemain : 0)
                      }}</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">{{ bookObj.price?.copperPrice }}USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li class="act">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i4.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">蓝莓</div>
                  <div class="idx">04</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">--</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">--</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">{{ bookObj.price?.bluePrice }}USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">购买享特权</div>
        <div class="m-txtb1">
          购买后享受采用金浆果、银浆果、铜浆果和蓝莓四级的NFT发行模式。用户可购买不同等级的NFT获得作品内容及作品销售分成
        </div>
        <ul class="ul-listb2">
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn1.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">持有收益分成</div>
                <div class="desc">获得资产的后续持续收益奖励</div>
              </div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn2.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">电子书下载</div>
                <div class="desc">购买版权后 可免费下载电子书</div>
              </div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn3.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">纸质书打印</div>
                <div class="desc">购买版权后 可下单打印纸质书</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">销售记录</div>
        <div class="m-txtb1">
          该销量记录明细为该书籍版权的各个阶段的销售记录
        </div>
        <div class="m-tableb1 sty1">
          <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :scroll="{ y: 420 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'hash'">
                <span class="opts">
                  <a href="#">
                    {{ record.hash }}
                  </a>
                </span>
              </template>
              <template v-if="column.key === 'updatedAt'">
                {{ timeFormat(record.updatedAt, 0) }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="m-tabbox">
        <ul class="ul-tabsb1">
          <li :class="{ act: 0 === currentIndex }" @click="currentIndex = 0">
            <div class="s">书籍详情</div>
          </li>
          <li :class="{ act: 1 === currentIndex }" @click="currentIndex = 1">
            <div class="s">分成说明</div>
          </li>
        </ul>
        <div class="tabboxb1" v-if="currentIndex === 0">
          <div class="m-xqbox1">
            <div class="ll">
              <div class="gp">
                <div class="title">书籍分类</div>
                <div class="txt">
                  <p>{{ bookObj.category }}</p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍语言</div>
                <div class="txt">
                  <p>{{ bookObj.language }}</p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍目录</div>
                <div class="txt">
                  {{ bookObj.tableOfContents }}
                </div>
              </div>
            </div>
            <div class="rr">
              <div class="gp">
                <div class="title">书籍作者说明</div>
                <div class="txt sty1">
                  <p>
                    {{ bookObj.contributorNotes }}
                  </p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍描述</div>
                <div class="txt">
                  <p>
                    {{ bookObj.description }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tabboxb1" v-if="currentIndex === 1">
          <div class="m-txtImgb1">
          
          <div class="col-l">
            <div class="pic">
              
              <div class="pic-txt">
                <div class="line">
                  <p>金浆果收益分配：</p>
                  <p>作者 / 平台</p>
                </div>
                <div class="line">
                  <p>银浆果收益分配：</p>
                  <p>金浆果持有者 / 作者</p>
                </div>
                <div class="line">
                  <p>铜浆果收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 作者 / 平台</p>
                </div>
                <div class="line">
                  <p>蓝莓收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 铜浆果持有者 / 作者 / 平台</p>
                </div>
              </div>
              <img src="/images/c-img1.png" alt="" />
            </div>
          </div>
        </div>
          <div class="m-xqbox2">
            <div class="gp">
              <div class="desc">
                图书版权的收益权被转化为金浆果、银浆果、铜浆果和蓝莓4种权利，这4种权利将分阶段发行作家和读者在这里共享权利和收益，作者和读者形成了一种前所未有的共生关系：作家提供作品，读者提供流动性，共同助力每部作品创造更多收入。
              </div>
              <ul class="bl-txt1">
                <li>
                  <div class="in">
                    <div class="h3">金浆果的神话</div>
                    <div class="info">
                      金浆果是第一阶段的发行，少量的份额只被那些眼光独到的早期读者捕捉到。金浆果持有者同时拥有一份电子书及一本纸质图书的打印权，金浆果的销售收入在作者和平台之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">银浆果的扩展</div>
                    <div class="info">
                      当金浆果售罄，银浆果开始销售。价格是金浆果的20%，发行数量是金浆果的二十倍。银浆果是对早期投资者的奖励，也是吸引更多人参与的桥梁。银浆果持有者依然享有电子书及一本纸质图书的打印权，银浆果的销售收入在作者、平台和金浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">铜浆果的普及</div>
                    <div class="info">
                      银浆果售罄后，铜浆果进入市场。价格是银浆果的20%，发行数量是银浆果的二十倍。更多人能够购买到作品的版权收益权，极大地提高了图书的市场流动性。铜浆果持有者同样获得电子书及一本纸质图书的打印权。售卖铜浆果的销售收入在作者、平台、金浆果和银浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">蓝莓的魔力</div>
                    <div class="info">
                      蓝莓是无限发行的级别，它象征着知识的普及与共享，让更多的读者能够阅读到作者的作品。持有者同时获得一份电子书及一本纸质图书的打印权。售卖蓝莓NFT的收入在作者、平台、金浆果、银浆果和铜浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="gp">
              <div class="desc">
                随着Silentberry四级出版发行模式的展开，越早期的支持者获得的回报越大,
                同时也为更多读者提供了进入的机会。低门槛出版模式只需少数的支持者即可产生收入，作者在图书发行的早期即可获取收益，并随着不断的发行逐渐增加收。
              </div>
              <ul class="bl-txt1 sty1">
                <li>
                  <div class="in">
                    <div class="info">
                      <p>金浆果发行</p>
                      <p>数量：3份（第一阶段版权收益权份数）</p>
                      <p>每份价格：1000美元</p>
                      <p>总计：3000美元</p>
                      <p>收益分配：</p>
                      <p>作者：80%（2400美元）</p>
                      <p>平台：20%（600美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>银浆果发行（金浆果售罄后）</p>
                      <p>数量：60份（金浆果的20倍）</p>
                      <p>每份价格：200美元（金浆果价格的20%）</p>
                      <p>总计：12000美元</p>
                      <p>收益分配：</p>
                      <p>金浆果持有者：60%（7200美元）</p>
                      <p>作者：20%（2400美元）</p>
                      <p>平台：20%（2400美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>铜浆果发行（银浆果售罄后）</p>
                      <p>数量：1200份（银浆果的20倍）</p>
                      <p>每份价格：40美元（银浆果价格的20%）</p>
                      <p>总计：48000美元</p>
                      <p>收益分配：</p>
                      <p>金浆果持有者：24%（11520美元）</p>
                      <p>银浆果持有者：36%（17280美元）</p>
                      <p>作者：20%（9600美元）</p>
                      <p>平台：20%（9600美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>蓝莓浆果发行（铜浆果售罄后）</p>
                      <p>数量：无限发行</p>
                      <p>每份价格：8美元</p>
                      <p>收益分配（在铜浆果持有者收回成本后）：</p>
                      <p>金浆果持有者：20%</p>
                      <p>银浆果持有者：20%</p>
                      <p>铜浆果持有者：20%</p>
                      <p>作者：20%</p>
                      <p>平台：20%</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 购买弹窗 -->
  <!-- 修改邮箱弹窗 -->
  <a-modal v-model:visible="visible" centered title="版权购买" :width="969" :footer="null">
    <div class="buy-pop">
      <div class="left">
        <div class="pic">
          <img :src="bookObj.bannerImages[0]" alt="" />
        </div>
      </div>
      <div class="right">
        <div class="tit">汉字与中华文化十讲</div>
        <div class="cen">
          <div class="gp">
            <div class="s">购买阶段：</div>
            <div class="rr">
              <div class="p-steps">
                <div class="itm" :class="step == 0 ? 'act' : ''" @click="step = 0">
                  <div class="dot"></div>
                  <div class="txt">
                    <div class="t">{{
                      bookObj.phase == 'GOLD' ? '金浆果' : (bookObj.phase == 'SILVER' ? '银浆果' : (bookObj.phase
                        =='COPPER'?'铜浆果':'')) }}
                    </div>
                    <div class="p">发行的第{{
                      bookObj.phase == 'GOLD' ? '一' : (bookObj.phase == 'SILVER' ? '二' : (bookObj.phase
                        == 'COPPER'?'三':''))}}阶段</div>
                  </div>
                </div>
                <div class="itm" :class="step == 1 ? 'act' : ''" @click="step = 1">
                  <div class="dot"></div>
                  <div class="txt">
                    <div class="t">蓝莓果</div>
                    <div class="p">发行的第四阶段</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="gp">
            <div class="s">当前价格：</div>
            <div class="rr">
              <div class="nums"><b>{{
               step==1?bookObj.price.bluePrice:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] 
                  }}</b> USD</div>
            </div>
          </div>
          <div class="gp">
            <div class="s">选择数量：</div>
            <div class="rr">
              <div class="g-numstep">
                <a-input-number v-model:value="selcount" size="small" :min="1"
                  :max=" step==1?bookObj.price.blueCount:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Count'] "></a-input-number>
              </div>
            </div>
          </div>
          <div class="gp">
            <div class="s">您需支付：</div>
            <div class="rr">
              <div class="price">{{
                ( step==1?bookObj.price.bluePrice:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] )?
                 ( step==1?bookObj.price.bluePrice:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] ) * selcount : 0
                }} USD</div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="btn btn1"
            @click="buy(( step==1?bookObj.price.bluePrice:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] ) ? ( step==1?bookObj.price.bluePrice:bookObj.price?.[bookObj.phase?.toUpperCase().toLowerCase() + 'Price'] ) * selcount : 0)">
            立即支付</div>
          <div class="btn" @click="visible = false">取消</div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 购买弹窗end -->
  <!-- 二维码弹窗 -->
  <a-modal
    class="modal-content1"
    v-model:visible="visible_qr"
    centered
    :width="420"
    :footer="null"
  >
    <div class="lg-qr">
      <div class="tit">metamask钱包支付</div>
      <div class="qr">
        <img src="/images/f-qr.png" alt="" />
      </div>
      <div class="p">使用您的移动钱包或手机相机扫描此二维码进行连接。</div>
    </div>
  </a-modal>
  <!-- 二维码弹窗end -->
</template>
<script setup>

import { reactive, ref, onMounted } from 'vue';
import { CopyOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
import request from '~/services/request'
import Cookies from 'js-cookie';
import { message } from 'ant-design-vue';
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const id = route.query.id
const columns = [{
  title: '日期',
  dataIndex: 'updatedAt',
  key: 'updatedAt',
}, {
  title: '版权等级',
  key: 'level',
  dataIndex: 'level',
}, {
  title: '数量',
  key: 'amount',
  dataIndex: 'amount',
}, {
  title: '售价',
  key: 'price',
  dataIndex: 'price',
}, {
  title: '交易哈希',
  key: 'txhash',
}];
const data = ref([]);
// 书籍详情 、分成说明切换
const currentIndex = ref(0);
const S3 = ref(null)
// 购买弹窗
const visible = ref(false);
const bookObj = ref({});
const step = ref(0);
const qb = ref({});
const selcount = ref(1);

const visible_qr = ref(false);
function gotoDetail(item) {
  router.push('/details?id=' + item.id)
}
function timeFormat(time, type) {
  if (time) {
    time = new Date(time)
  }
  // 获取当前日期
  const now = new Date();
  // 近七天
  const last7Days = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));

  // 近半个月
  const last15Days = new Date(now.getTime() - (15 * 24 * 60 * 60 * 1000));

  // 近一个月
  const last30Days = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));

  // 近三个月
  const last90Days = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));

  // 使用Intl.DateTimeFormat格式化日期
  const dateFormatter = new Intl.DateTimeFormat('en-ca', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    dataStyle: 'short',
  });
  const dateFormatterLong = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    dataStyle: 'short',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });

  // 格式化日期
  const formattedLast7Days = dateFormatterLong.format(last7Days).replace(/\//g, '-');
  const formattedLast15Days = dateFormatterLong.format(last15Days).replace(/\//g, '-');
  const formattedLast30Days = dateFormatterLong.format(last30Days).replace(/\//g, '-');
  const formattedLast90Days = dateFormatterLong.format(last90Days).replace(/\//g, '-');
  if (type == 0) {
    return dateFormatterLong.format(time).replace(/\//g, '-')
  } else if (type == 1) {
    return dateFormatterLong.format().replace(/\//g, '-')
  } else if (type == 7) {
    return formattedLast7Days
  } else if (type == 15) {
    return formattedLast15Days
  } else if (type == 30) {
    return formattedLast30Days
  } else if (type == 90) {
    return formattedLast90Days
  }
}
function buy(money) {
  request.get_users_me().then(async (res) => {
    if (res) {
      let params={
  "uid": JSON.parse(Cookies.get('user-data')).id,
  "clusterId": bookObj.value.cluster?.clusterId,
  "data": {
    "BookID": bookObj.value.id,
    "Name": bookObj.value.title,
    "ISBN": bookObj.value.copyright?.isbn?.isbnNum,
    "Uri": bookObj.value.bannerImages[0],
    "Lang": bookObj.value.language
  },
  "level": step.value==1?'BLUE':bookObj.value.phase,
  "amount": selcount.value,
  "price": money
  }
  request.post_spore_dna(params).then(async (res)=>{
    if (Cookies.get('login-type') == 'EvmPersonal') {
        if (typeof window.ethereum !== 'undefined') {
          try {
                // Request user account access
                await window.ethereum.request({ method: 'eth_requestAccounts' });
               let accounts = await window.ethereum.request({ method: 'eth_accounts' });
                // Define transaction parameters
                const txParams = {
                    from: accounts[0], // Sender's address (MetaMask account)
                    to: res.collection_address.eth, // Replace with recipient address
                    value: money.toString(16), // Amount to send in wei (0.01 ETH)
                };

                // Send transaction
                const txHash = await window.ethereum.request({
                    method: 'eth_sendTransaction',
                    params: [txParams],
                });
                  debugger
                // Log transaction hash
                console.log('Transaction sent: ', txHash);
                alert('Transaction sent: ' + txHash);
            } catch (error) {
                console.error('Transaction failed:', error);
                message.error({
            content: () => '支付取消！',
            class: 'custom-class',
            style: {
              marginTop: '20vh',
            },
          });
            }

          // try {
          //   // 请求访问权限  
          //   qb.value = window.ethereum
          //   debugger
          //    await qb.value.request({ method: 'eth_requestAccounts' });
          //   const accounts = await qb.value.request({ method: 'eth_accounts' });
          //   if (accounts.length > 0) {
          //     let transactionParameters = { from: accounts[0], to: res.collection_address.eth, value: '0x38d7ea4c6800000', nonce: new Date().getTime(), chainId: 3 }
          //     const txResponse = await qb.value.request({ method: 'eth_sendTransaction', params: [ transactionParameters ] });
          //     console.log('Transaction hash:', txResponse);
          //     qb.value.on('transactionHash', (hash) => {  })
          //     qb.value.on('receipt', (receipt) => { })
          //     qb.value.on('error', (error) => {  })
          //     if (typeof transactionReceipt === 'string') {
          //       // 处理字符串类型的交易哈希  
          //       console.log('Transaction hash:', transactionReceipt);
          //     } else {
          //       // 处理其他类型的响应  
          //       console.log('Transaction receipt:', transactionReceipt);
          //     }
          //   } else {
          //     console.error('No Ethereum accounts found');
          //     return null;
          //   }
          // } catch (error) {
          //   if (error.code === -32603 && error.message.includes('e.startsWith is not a function')) {
          //     // 处理 RPC 错误  
          //     console.error('RPC Error:', error);
          //   } else {
          //     // 处理其他类型的错误  
          //     console.error('Error:', error);
          //   }
          // }
        } else {
          message.error({
            content: () => '请安装钱包插件！',
            class: 'custom-class',
            style: {
              marginTop: '20vh',
            },
          });
        }
      } else if (Cookies.get('login-type') == 'BtcEcdsa') {

        if (typeof window.unisat === 'undefined') {
          // Element-ui Message 组件
          alert('没有钱包插件！')
          return false
        }
        else {
          try {
            const accounts = await window.unisat.requestAccounts()
            await window.unisat.switchNetwork("testnet");
            // console.log('链接成功', accounts)
            const r = await window.unisat.getAccounts()
            // console.log('钱包', r)
            // let res = await window.unisat.getBalance();
            // console.log(res)
            window.unisat.sendBitcoin(
              res.collection_address.btc, // 接收地址  
              1000, // 发送 0.0001 BTC  
              (result) => {
                if (result.success) {
                  console.log(`Transaction successful. TXID: ${result.txid}`);
                } else {
                  console.error(`Transaction failed: ${result.error}`);
                }
              }
            );
            const publicKey = await window.unisat.getPublicKey()
            //         window.unisat.signTransaction(transactionParameters).then(signedTransaction => {
            //     console.log('Signed transaction:', signedTransaction);
            // }).catch(error => {
            //     console.error('Failed to sign transaction:', error);
            // });

            // console.log('签名', sign)      
          } catch (err) {
            message.error({
            content: () => '支付取消！',
            class: 'custom-class',
            style: {
              marginTop: '20vh',
            },
          });
            console.log(err, 'err')
          }
        }
      } else {

      }
  })
    }
  })
}
onMounted(() => {
  let script = document.createElement('script');
  script.src = '/aws-sdk-2.1673.0.min.js';
  script.onload = () => {
    // 脚本加载完毕后的回调
    AWS.config.update({
      accessKeyId: 'AKIA23OJK3X3H2OI5MLV',
      secretAccessKey: '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',
      region: 'ap-northeast-1'
    })

    S3.value = new AWS.S3({
      apiVersion: "2006-03-01",
      params: { Bucket: 'silentberry.co' }
    })
    request.get_books_by_id({ id: id }).then((res) => {
      bookObj.value=res
  })
  request.get_sale({ id: id, sort: 'updatedAt_desc', take: 999999 }).then((res) => {
    data.value = res.results
  })
  };
  document.body.appendChild(script);

});
</script>

<style>
</style>
